<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="css/plugins/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>

<body class="layui-layout-login">
<div class="login-bg">
    <div class="cover"></div>
</div>
<div class="login-content" >
    <h1 class="login-box-title"><i class="fa fa-fw fa-user"></i>登录</h1>
    <form class="layui-form" id="loginForm" lay-filter="loginForm">

        <div class="layui-form-item">
            <label class="layui-icon layui-icon-username" for="username"></label>
            <input class="layui-input" type="text" name="username" id="username" autocomplete="off"  placeholder="用户名" lay-verify="required">
        </div>

        <div class="layui-form-item">
            <label class="layui-icon layui-icon-password" for="password"></label>
            <input class="layui-input" type="password" name="password" id="password" autocomplete="off" placeholder="密码" lay-verify="required">
        </div>

        <div class="layui-form-item captcha-item">
            <label class="layui-icon layui-icon-vercode"></label>
            <input class="layui-input" type="text" id="code" name="code" autocomplete="off" placeholder="验证码" lay-verify="required">
            <div onclick="addPic()" >

                <img id="addPic"  class="captcha-img" src="" />

            </div>
        </div>

        <button type="button" lay-filter="loginSubmit" lay-submit  id="login" class="layui-btn layui-btn-fluid ajax-login"><i class="fa fa-sign-in fa-lg fa-fw"></i> 登录</button>
    </form>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">

    //生成验证码
    createCode();

    /**
     * 生成验证码
     */
    function createCode() {
        $("#addPic").prop("src","admin-login/createCode")
    }

    /**
     * 更换验证码
     */
    function addPic() {
        // 修改图片的src属性  在url后拼接随机数
        $("#addPic").prop("src","admin-login/createCode?hh=" + Math.random())
    }

    layui.use(['layer','form'],function () {
        var layer = layui.layer;
        var form = layui.form;
        /**
         * 监听登陆按钮
         * */
        form.on("submit(loginSubmit)",function (obj) {
            $.ajax({
                url:'admin-login/login',
                data:{
                    username:$("#username").val(),
                    password:$("#password").val(),
                    code:$("#code").val()
                },
                type:"post",
                dataType:"json",
                success:function (data) {
                    if(data.code==200){
                        location.href = 'main.html';
                    }else{
                        layer.msg(data.message,{icon:'2',title:'提示'});
                        addPic();
                    }
                }
            });
            return false;
        });

    });

</script>
</html>
